<template>
  <div class="about-view">
    <div class="container">
      <h1 class="page-title">{{ $t('about.title') }}</h1>

      <!-- Language Switcher -->
      <div class="language-switcher">
        <button @click="switchLanguage('zh-CN')" :class="{ active: $i18n.locale === 'zh-CN' }">简体中文</button>
        <button @click="switchLanguage('zh-TW')" :class="{ active: $i18n.locale === 'zh-TW' }">繁體中文 (台灣)</button>
        <button @click="switchLanguage('zh-HK')" :class="{ active: $i18n.locale === 'zh-HK' }">繁體中文 (香港)</button>
      </div>
      
      <section class="about-section vision-section card">
        <div class="section-content">
           <h2 class="section-title">{{ $t('about.section1.heading') }}</h2>
           <p>{{ $t('about.section1.paragraph1') }}</p>
           <p>{{ $t('about.section1.paragraph2') }}</p>
        </div>
        <!-- Optional: Add an image or icon related to vision -->
        <div class="section-image">
            <i class="fas fa-lightbulb"></i> <!-- Example icon -->
        </div>
      </section>

      <section class="about-section what-we-offer-section card reverse-layout">
         <div class="section-image">
             <i class="fas fa-heart"></i> <!-- Example icon -->
         </div>
        <div class="section-content">
          <h2 class="section-title">{{ $t('about.section2.heading') }}</h2>
           <p>{{ $t('about.section2.paragraph1') }}</p>
           <p>{{ $t('about.section2.paragraph2') }}</p>
           <!-- Example list, integrate into i18n messages if needed -->
            <!--
           <ul>
              <li><strong>{{ $t('about.section2.feature1.title') }}:</strong> {{ $t('about.section2.feature1.description') }}</li>
               <li><strong>{{ $t('about.section2.feature2.title') }}:</strong> {{ $t('about.section2.feature2.description') }}</li>
           </ul>
           -->
        </div>
      </section>

       <section class="about-section commitment-section card">
         <div class="section-content">
            <h2 class="section-title">{{ $t('about.section3.heading') }}</h2>
            <p>{{ $t('about.section3.paragraph1') }}</p>
             <p>{{ $t('about.section3.paragraph2') }}</p>
         </div>
          <div class="section-image">
             <i class="fas fa-shield-alt"></i> <!-- Example icon -->
         </div>
       </section>

       <section class="about-section contact-us-section card reverse-layout">
          <div class="section-image">
             <i class="fas fa-envelope"></i> <!-- Example icon -->
         </div>
         <div class="section-content">
           <h2 class="section-title">{{ $t('about.section4.heading') }}</h2>
           <p>{{ $t('about.section4.paragraph1') }} <router-link to="/contact">{{ $t('about.section4.linkText') }}</router-link>.</p>
         </div>
       </section>

        <!-- Add more sections as needed -->
        <!-- Example: Team Section -->
         <!--
        <section class="about-section team-section card">
             <h2 class="section-title">{{ $t('about.section5.heading') }}</h2>
             <div class="team-members">
                  <div class="team-member">
                       <img src="#" alt="Team Member Name" class="member-avatar">
                       <h3>{{ $t('about.section5.member1.name') }}</h3>
                       <p>{{ $t('about.section5.member1.role') }}</p>
                  </div>
                  </div>
        </section>
        -->

    </div>
  </div>
</template>

<script>
export default {
  name: 'AboutView',
  methods: {
    switchLanguage(locale) {
      this.$i18n.locale = locale;
    }
  }
}
</script>

<style scoped>
.about-view {
  padding: 60px 0;
  background-color: var(--bg-color-primary); /* Use theme variable */
  color: var(--text-color); /* Use theme variable */
}

.container {
    max-width: 960px; /* Increased max-width for better content display */
    margin: 0 auto;
    padding: 0 20px;
    width: ;
}

.page-title {
    text-align: center;
    color: var(--primary-color);
    margin-bottom: 40px;
    font-size: 2.8em; /* Slightly larger title */
    position: relative;
}

.page-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background-color: var(--secondary-color);
    margin: 10px auto 0;
    border-radius: 2px;
}

.language-switcher {
    text-align: center;
    margin-bottom: 30px;
}

.language-switcher button {
    background-color: var(--card-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    padding: 8px 15px;
    margin: 0 5px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.language-switcher button.active {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.language-switcher button:hover:not(.active) {
     background-color: var(--bg-color-secondary);
}

.about-section {
    padding: 40px; /* Increased padding */
    margin-bottom: 40px; /* Increased margin */
    display: flex;
    align-items: center;
    gap: 40px; /* Space between content and image/icon */
}

.about-section.reverse-layout {
    flex-direction: row-reverse; /* Reverse layout for alternating sections */
}

.section-content {
    flex: 1; /* Allows content to take up available space */
}

.section-image {
    flex-shrink: 0; /* Prevent image/icon from shrinking */
    width: 150px; /* Fixed width for image/icon container */
    height: 150px; /* Fixed height */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 80px; /* Size of the icon */
    color: var(--primary-color); /* Icon color */
    background-color: var(--bg-color-secondary); /* Background for the icon area */
    border-radius: 10px; /* Rounded corners */
}

.about-section h2.section-title {
    color: var(--text-color);
    font-size: 2em;
    margin-bottom: 15px;
    border-bottom: 2px solid var(--secondary-color); /* Use secondary color for underline */
    padding-bottom: 10px;
}

.about-section p {
    color: var(--text-light);
    line-height: 1.7;
    margin-bottom: 15px;
    font-size: 1.1em;
}

.about-section ul {
    color: var(--text-light); /* Apply text-light to list items */
    line-height: 1.7;
    margin-bottom: 15px;
    font-size: 1.1em;
    padding-left: 30px;
}

.about-section ul li {
    margin-bottom: 10px;
}

.about-section ul li strong {
    color: var(--text-color); /* Strong text color */
}

.about-section a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

.about-section a:hover {
    color: var(--secondary-color);
    text-decoration: underline;
}

.card {
  background: var(--card-bg);
  border-radius: 10px;
  box-shadow: var(--shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Remove hover effect for cards in about view if it's distracting */
/*
.about-section.card:hover {
   transform: none;
   box-shadow: var(--shadow);
}
*/

@media (max-width: 768px) {
    .about-view {
      padding: 40px 0;
    }

    .page-title {
      font-size: 2.2em;
    }

    .about-section {
      padding: 30px;
      flex-direction: column; /* Stack elements vertically on small screens */
      gap: 30px;
    }

     .about-section.reverse-layout {
        flex-direction: column; /* Ensure stacking even with reverse layout class */
     }

    .section-image {
        width: 100px;
        height: 100px;
        font-size: 60px;
    }

    .about-section h2.section-title {
      font-size: 1.8em;
    }

    .about-section p,
    .about-section ul {
       font-size: 1em;
    }

    .language-switcher button {
        padding: 6px 10px;
        margin: 0 3px;
        font-size: 0.9em;
    }
}
</style> 